<template>
  <BaseLayoutTree :loading="loading" treeTitle="组织机构" title="用户管理" @query="init" @reset="reset">
    <template #button>
      <el-button v-buttonBlur type="primary" @click="addUser">新增</el-button>
    </template>
    <template #tree>
      <OrgTree ref="orgTreeRef" @nodeClick="nodeClickHandler"></OrgTree>
    </template>
    <template #query>
      <el-form
          :model="queryForm"
          @submit="init"
          :inline="true"
      >
        <el-form-item label="用户名称">
          <el-input clearable v-model="queryForm.realName" placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="登录名称">
          <el-input clearable v-model="queryForm.username" placeholder="请输入登录名称"/>
        </el-form-item>
      </el-form>
    </template>
    <template #table>
      <el-table
          :data="userData"
          height="100%"
      >
        <el-table-column header-align="center" align="center" label="序号" type="index" width="55"/>
        <el-table-column header-align="center" align="center" label="用户名称" prop="realName" width="120"/>
        <el-table-column header-align="left" align="left" label="登录名称" prop="username" width="220"/>
        <el-table-column header-align="left" align="left" label="所属公司" prop="comName"/>
        <el-table-column header-align="center" align="center" label="手机号" prop="phone"/>
        <el-table-column prop="enabled" label="是否启用" align="center" header-align="center" width="100">
          <template #default="scope">
            <BaseTag :value="scope.row.enabled" :dict="enableOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center" header-align="center">
          <template #default="scope">
            <el-button link type="primary" @click="editUser( scope.row.userId)">修改</el-button>
            <el-button link type="primary" @click="setRole( scope.row.userId)">设置角色</el-button>
            <el-button link type="primary" @click="setPost( scope.row.userId,scope.row.orgId)">设置职位</el-button>
            <el-button link type="danger" @click="delUser( scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #page>
      <BasePage @load="init" v-model:current="queryForm.current" v-model:size="queryForm.size"
                :total="queryForm.total"></BasePage>
      <AddOrUpdateUser @load="loadUser" ref="addOrUpdateUserRef"></AddOrUpdateUser>
      <SetUserPost ref="setUserPostRef"></SetUserPost>
      <SetUserRole ref="setUserRoleRef"></SetUserRole>
    </template>
  </BaseLayoutTree>
</template>
<script setup lang="ts" name="user">
import {onMounted, reactive, ref} from "vue";
import {UserModel} from "/@/api/system/model/UserModel";
import {deleteUserByUserId, listUserPage, listUserPostByUserId, selectUserInfoByUserId} from "/@/api/system/UserApi";
import AddOrUpdateUser from './AddOrUpdateUser.vue'
import {messageBox} from "/@/utils/BjxUtils";
import SetUserPost from './SetUserPost.vue'
import SetUserRole from './SetUserRole.vue'
import {DictDataModel} from "/@/api/system/model/DictModel";
import {useDictStore} from "/@/store/modules/dict";

const setUserPostRef = ref()
const enableOptions = ref<DictDataModel[]>([])
const userData = ref<UserModel[]>([])
const orgTreeRef = ref()
const addOrUpdateUserRef = ref()
const loading = ref(false)
const setUserRoleRef = ref()
const queryForm = reactive({
  orgId: '',
  realName: '',
  username: '',
  current: 1,
  size: 10,
  total: 0
})

const init = async () => {
  loading.value = true
  let res = await listUserPage(queryForm, () => {
    loading.value = false
  })
  userData.value = res.records
  queryForm.total = res.total
}
const reset = () => {
  queryForm.realName = ''
  queryForm.username = ''
  queryForm.current = 1
  init()
}
const nodeClickHandler = (orgId: string) => {
  queryForm.orgId = orgId
  init()
}
const addUser = () => {
  addOrUpdateUserRef.value.init("新增用户",{orgId: queryForm.orgId})
}
const loadUser = (orgId: string) => {
  orgTreeRef.value.setCurrentKey(orgId)
}
const editUser = async (userId: string) => {
  let res = await selectUserInfoByUserId(userId)
  addOrUpdateUserRef.value.init("修改用户", res)
}
const delUser = (userId: string) => {
  messageBox("您确定要删除这个用户吗?", async () => {
    loading.value = true
    await deleteUserByUserId(userId, () => {
      loading.value = false
    })
    init()
  })
}
/**
 * 设置角色
 */
const setRole = (userId: string) => {
  setUserRoleRef.value.init(userId)
}
/**
 * 设置职位
 */
const setPost = async (userId: string,orgId: string) => {
  let res = await  listUserPostByUserId(userId)
  setUserPostRef.value.init({userId,orgId},res)
}
onMounted( async()=>{
  let dictStore = useDictStore();
  enableOptions.value = await dictStore.getDict('enable_dict')
})
</script>

<style scoped>

</style>